<template>
  <div class="analysis-page">
    <Card class="search-banner">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-search>
      <Spin v-if="loading" fix></Spin>
    </Card>
    <Row :gutter="6" class="top-part">
      <Col span="12" style="height:100%">
          <Card v-if="!!barData">
            <starLine
              class="chart-item"
              :language="barLanguage"
              :data="barData"
              :config="barConfig"
            ></starLine>
          </Card>
         <noData v-else class="no-data"></noData>
      </Col>
      <Col span="12" style="height:100%">
         <Card v-if="!!pieData">
            <starPie
            class="chart-item"
            :language="pieLanguage"
            :data="pieData"
            :config="pieConfig"
          ></starPie>
         </Card>
         <noData v-else class="no-data"></noData>
      </Col>
    </Row>
    <div class="last-box" style="height:100%">
        <Card v-if="!!lineData">
          <starLine class="line-chart chart-item"
          :config="lineConfig"
          :language="lineLanguage"
          :data="lineData"
        ></starLine>
        </Card>
      <noData v-else class="no-data line-no-data"></noData>
    </div>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import noData from "../components/noData.vue";
export default {
  components: { TableSearch,noData },
  props: {
    queryFormItem: {
      default: () => []
    },
    collapseFormItem: {
      default: () => []
    },
    type: {
      default: ''
    },
    equipmentId: {
      default: () => 0
    },
    loading: {
      default: () => false
    }
  },
  data() {
    return {
      filter: {},
      labelWidth: 80,
      barLanguage: {
        "en-US": {
          headTitle: "monthly energy statistics",
          title: "",
        },
        "zh-CN": {
          headTitle: "当月能源统计",
          title: "",
        },
      },
      barData: null,
      barConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: true,
        yAxisNameLocation: "end",
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        legend: true,
        grid: {
          bottom: 40,
        },
        showBackground: true,
      },
      pieConfig: {
        toolbox: false,
        legend: true,
        radius: ["20%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        label: true,
        labelLine: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
      },
      pieLanguage: {
        "en-US": {
          headTitle: "the proportion of energy in the current month",
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          headTitle: "当月能源占比",
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      pieData: null,
      lineData: null,
      lineLanguage: {
        "en-US": {
          headTitle: "energy analysis for the current month",
          title: "",
        },
        "zh-CN": {
          headTitle: "当月能源分析",
          title: "",
        },
      },
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        grid: {
          bottom: 40,
        },
      },
    };
  },
  computed: {
     lang() {
       return {
         "en-US": {
           cancel: "cancel",
           confirmDelete: "confirm delete?",
         },
         "zh-CN": {
           cancel: "取消",
           confirmDelete: "确认删除？",
         },
       }[this.G_Locale];
     },
   },
  created() {
   //初次打开页面，默认粒度
   this.filter = {
      scale:'天', // 默认值
   };
  },
  watch: {
    "filter.searchType":function(val) {
      if(val === 'energyConsume') {
        this.$emit('queryPush', 'energyConsume')
      } else if (val === 'medium') {
        this.$emit('queryPush', 'medium')
      } else if(val === 'workShop') {
        this.$emit('queryPush', 'workShop')
      } else if (val === 'product') {
        this.$emit('queryPush', 'product')
      } else {
        this.$emit('queryPush', 'clear')
      }
    },
    "filter.workshop":function(val) {
      this.$emit('workShopName', val)
    },
    "filter.planNo":function(val) {
      this.$emit('planName', val)
    },
  },
  methods: {
    // 参数判断处理
    paramsJudgment() {
      let { timeRange, scale, searchType, equipment, workshop, planNo, noticeNo } = this.filter;
      /*if(!searchType) {
        this.$Message.error("请选择按什么查找类型进行查询");
        return false;
      }*/
      if(this.type === 'hydrogenConsum') {
        if (!timeRange) {
          this.$Message.error("请选择时间区间");
          return false;
        }
      } else if (this.type === 'energyConsume') {
        if(searchType === 'energyType') {
          if (!timeRange || !scale) {
            this.$Message.error("请选择时间区间及粒度");
            return false;
          }
        } else if (searchType === 'energyConsume') {
          if (!timeRange || !scale || !equipment) {
            this.$Message.error("请选择设备、时间区间及粒度");
            return false;
          }
        }
      } else if (this.type === 'energyCost') {
        if(searchType === 'medium') {
          if (!timeRange || !scale) {
            this.$Message.error("请选择时间区间及粒度");
            return false;
          }
        } else if(searchType === 'workShop') {
          if (!workshop || !equipment || !timeRange) {
            this.$Message.error("请选择时间区间及设备");
            return false;
          }
        } else if(searchType === 'product') {
          if (!scale || !planNo || !noticeNo) {
            this.$Message.error("请选择粒度、计划、通知单");
            return false;
          }
        }
      }
      return true
    },
    handleSearch() {
      if(!this.paramsJudgment()) return
      let { timeRange, beginTime, endTime, searchType } = this.filter;
      if (!!timeRange && Array.isArray(timeRange)) {
        beginTime = timeRange[0];
        endTime = timeRange[1];
      }
      let params = { ...this.filter, beginTime, endTime };
      // 用于制氢站传递默认设备的时候使用
      if(this.equipmentId !== 0) {
        params.equipment = this.equipmentId
      }
      if(searchType === 'product') {
        this.mediumQuery(params)
      } else if(searchType === 'energyType' || searchType === 'medium') {
        this.energyQuery(params)
      } else {
        this.normalQuery(params)
      }
    },
    normalQuery(params) {
      this.$api.Custom.energyBPL(params).then((res) => {
        if (!res) {
          return;
        }
        res = res.data
        let { categories, values } = res;
        this.$set(this, "barData", {})
        this.$set(this, "barData", {
          categories,
          values: this.transValues(values),
        });
        console.log(this.barData,"this.barData");
        res.dataList.forEach(item => {
          item.name = item.category
        })
        this.$set(this, "pieData", res.dataList);
        this.$set(this, "lineData", {
          categories,
          values: this.transValues(values),
        });
      });
    },
    mediumQuery(params) {
      this.$api.Custom.energyMediumQuery(params).then((res) => {
        if (!res) {
          return;
        }
        res = res.data
        let { categories, values } = res;
        this.$set(this, "barData", {
          categories,
          values: this.transValues(values),
        });
         res.dataList.forEach(item => {
          item.name = item.category
        })
        this.$set(this, "pieData", res.dataList);
        this.$set(this, "lineData", {
          categories,
          values: this.transValues(values),
        });
      });
    },
    energyQuery(params) {
      this.$api.Custom.energyAnalysis(params).then((res) => {
        if (!res) {
          return;
        }
        let { categories, values } = res;
        this.$set(this, "barData", {})
        this.$set(this, "barData", {
          categories,
          values: this.transValues(values),
        });
        this.$set(this, "pieData", res.dataList);
        this.$set(this, "lineData", {
          categories,
          values: this.transValues(values),
        });
      });
    },
    handleReset() {
      this.filter = {};
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.data;
      });
      return obj;
    },
  },
};
</script>
<style scoped lang="scss">
.analysis-page {
  padding-top: 10px;
  height: 100%;
  padding: 10px;
  .top-part{
   height: calc(40% - 30px);
  }
  .chart-item{
    // border: 1px solid #797979;
    // border-radius: 10px;
    height: 100%;
    padding-top: 10px;
  }
  .line-chart{
   margin-top: 10px;
   height: 100%;
  }
  .no-data{
    border: 1px solid #dfdfdf;
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
    padding-top: 40px;
  }
  .line-no-data{
   margin-top: 10px;
   height: calc(60% - 60px);
  }
}
.search-banner {
  position: relative;
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
}
.last-box {
  margin-top: 20px;
}
::v-deep .ivu-col .ivu-card-body {
    height: 320px;
}
::v-deep .last-box .ivu-card-body {
    display: flex;
    justify-content: center;
    height: 380px;
}
</style>
